import React, { Component } from 'react'
import { SideBar } from 'antd-mobile'
import Header from '../../components/Header/Header'
import { reqgetcate, reqgetgoods } from '../../http/api'
import { Link } from 'react-router-dom'
import { $pre } from '../../http/http'
import "./Cate.less"

export class Cate extends Component {
  constructor() {
    super()
    this.state = {
      cate: [],
      goods:[],
    }
  }
  componentDidMount() {
    this.getcate()
    this.getgoods()
  }
  async getcate() {
    let res = await reqgetcate()
    if (res.data.code === 200) {
      this.setState({
        cate: res.data.list
      })
    }
  }
  async getgoods(fid=1){
    let res = await reqgetgoods({fid})
    if(res.data.code === 200){
      this.setState({
        goods:res.data.list
      })
    }
  }

  render() {
    let { cate,goods } = this.state
    return (
      <div className='cate'>
        <Header title="商品分类" back></Header>
        <SideBar defaultActiveKey="1" onChange={(v)=>this.getgoods(v)}>
          {cate.map(item => (
            <SideBar.Item key={item.id} title={item.catename}/>
          ))}
        </SideBar>
        <ul className='goods'>
          {
            goods.map(item => {
              return (
                <Link key={item.id} to={"/detail/" + item.id}>
                  <li>
                    <img src={$pre + item.img} alt="" />
                    <h3>{item.goodsname}</h3>
                    <p>￥<span>{item.price}</span></p>
                    <del>￥{item.market_price}</del>
                  </li>
                </Link>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

export default Cate